//pages/exercise/detail.vue
<template>
  <view class="page">
    <!-- 顶部进度条 -->
    <view class="progress-bar">
      <view class="progress" :style="{ width: `${(currentIndex + 1) / totalQuestions * 100}%` }"></view>
    </view>
    
    <!-- 题目信息 -->
    <view class="question-info">
      <text class="question-number">第{{ currentIndex + 1 }}/{{ totalQuestions }}题</text>
      <text class="question-type">{{ question.type }}</text>
    </view>

    <!-- 题目内容 -->
    <scroll-view class="question-content" scroll-y>
      <view class="question-title">{{ question.title }}</view>
      
      <!-- 选项列表 -->
      <view class="options-list">
        <view 
          v-for="(option, index) in question.options" 
          :key="index"
          class="option-item"
          :class="{ selected: selectedOption === index }"
          @click="selectOption(index)"
        >
          <text class="option-label">{{ ['A', 'B', 'C', 'D'][index] }}</text>
          <text class="option-content">{{ option }}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="timer">
        <text class="timer-icon">⏱</text>
        <text class="timer-text">{{ formatTime(timeSpent) }}</text>
      </view>
      
      <view class="actions">
        <button 
          class="action-btn prev-btn" 
          :disabled="currentIndex === 0"
          @click="handlePrev"
        >上一题</button>
        
        <button 
          class="action-btn next-btn" 
          @click="handleNext"
        >{{ isLastQuestion ? '提交' : '下一题' }}</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 改为5道题
const totalQuestions = 5
const currentIndex = ref(0)
const selectedOption = ref(null)
const answers = ref(new Array(totalQuestions).fill(null))
const timeSpent = ref(0)
let timer

// 模拟5道题的数据
const questions = [
  {
    type: '单选题',
    title: '已知函数f(x)=ln(x+√(x²+1))，则f′(0)=?',
    options: ['1', '1/2', '2', '0'],
    answer: 1
  },
  {
    type: '单选题',
    title: '设Z=2+3i，则|Z|=?',
    options: ['√13', '13', '5', '6'],
    answer: 0
  },
  {
    type: '单选题',
    title: '矩阵A的特征值为2，-1，0，则|A+2E|=?',
    options: ['0', '4', '8', '-4'],
    answer: 2
  },
  {
    type: '单选题',
    title: '函数f(x)=x³在区间[-1,1]上的最大值是?',
    options: ['0', '1', '-1', '2'],
    answer: 1
  },
  {
    type: '单选题',
    title: '设limx→0(sinx)/x=1，则limx→0(1-cosx)/x²=?',
    options: ['0', '1/2', '1', '2'],
    answer: 1
  }
]

// 当前题目
const question = computed(() => {
  return questions[currentIndex.value]
})

// 判断是否是最后一题
const isLastQuestion = computed(() => {
  return currentIndex.value === totalQuestions - 1
})

// 判断当前题目是否已选择答案
const hasAnswer = computed(() => {
  return selectedOption.value !== null
})

// 选择选项
const selectOption = (index) => {
  selectedOption.value = index
  answers.value[currentIndex.value] = index
}

// 上一题
const handlePrev = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--
    selectedOption.value = answers.value[currentIndex.value]
  }
}

// 计算得分
const calculateScore = () => {
  let correctCount = 0
  answers.value.forEach((answer, index) => {
    if (answer === questions[index].answer) {
      correctCount++
    }
  })
  return Math.round((correctCount / totalQuestions) * 100)
}

// 下一题或提交
const handleNext = () => {
  if (!hasAnswer.value) {
    uni.showToast({
      title: '请选择一个答案',
      icon: 'none'
    })
    return
  }

  if (isLastQuestion.value) {
    handleSubmit()
  } else {
    currentIndex.value++
    selectedOption.value = answers.value[currentIndex.value]
  }
}

// 提交答案
const handleSubmit = () => {
  // 检查是否所有题目都已作答
  const allAnswered = answers.value.every(answer => answer !== null)
  if (!allAnswered) {
    uni.showToast({
      title: '请完成所有题目',
      icon: 'none'
    })
    return
  }

  // 显示加载提示
  uni.showLoading({
    title: '正在提交...'
  })

  // 计算得分
  const score = calculateScore()

  // 模拟提交过程
  setTimeout(() => {
    uni.hideLoading()
    
    // 显示提交成功提示
    uni.showToast({
      title: '提交成功',
      icon: 'success',
      duration: 1500,
      success: () => {
        // 等提示显示完后跳转到结果页
        setTimeout(() => {
          uni.navigateTo({
            url: `/pages/exercise/result?time=${timeSpent.value}&score=${score}`,
            success: () => {
              clearInterval(timer)
            }
          })
        }, 1500)
      }
    })
  }, 1000)
}

// 格式化时间
const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
}

onMounted(() => {
  timer = setInterval(() => {
    timeSpent.value++
  }, 1000)
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>
<style scoped>
.page {
  min-height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.progress-bar {
  height: 8rpx;
  background: #f0f0f0;
  width: 100%;
}

.progress {
  height: 100%;
  background: #A8BF8F;
  transition: width 0.3s ease;
}

.question-info {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2rpx solid #f5f5f5;
}

.question-number {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.question-type {
  font-size: 28rpx;
  color: #A8BF8F;
  background: rgba(168, 191, 143, 0.1);
  padding: 4rpx 20rpx;
  border-radius: 20rpx;
}

.question-content {
  flex: 1;
  padding: 30rpx;
}

.question-title {
  font-size: 32rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 40rpx;
}

.options-list {
  padding: 20rpx 0;
}

.option-item {
  display: flex;
  align-items: flex-start;
  padding: 30rpx;
  background: #f8f8f8;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.option-item.selected {
  background: rgba(168, 191, 143, 0.1);
  border: 2rpx solid #A8BF8F;
}

.option-label {
  width: 60rpx;
  height: 60rpx;
  background: #fff;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
  margin-right: 20rpx;
}

.selected .option-label {
  background: #A8BF8F;
  color: #fff;
}

.option-content {
  flex: 1;
  font-size: 30rpx;
  color: #333;
  line-height: 1.5;
  padding: 10rpx 0;
}

.bottom-bar {
  padding: 30rpx;
  border-top: 2rpx solid #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.timer {
  display: flex;
  align-items: center;
}

.timer-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
}

.timer-text {
  font-size: 28rpx;
  color: #666;
}

.actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 60rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
}

.prev-btn {
  background: #f5f5f5;
  color: #666;
}

.prev-btn[disabled] {
  opacity: 0.5;
}

.next-btn {
  background: #A8BF8F;
  color: #fff;
}

.action-btn:active {
  opacity: 0.8;
}
</style>